<template>
  <div class="flex flex-column height paysuccess">
    <header-top
      class="head"
      ref="header"
      :TxtHeader="TxtHeader"
      @leftClick="back"
    ></header-top>
    <div class="pay_content">
      <div class="pay_top">
        <div class="top_img">
          <img src="./img/icon_fail.png" />
        </div>
        <div class="top_cg">
          <span>支付失败！</span>

          <p>
            订单将于<strong
              ><van-count-down :time="time" format="mm 分 ss 秒"/></strong
            >后自动取消，请尽快支付！
          </p>
        </div>
        <div class="top_wz">继续支付</div>
      </div>
      <div class="pay_info">
        <div class="pay_title">
          订单信息
        </div>
        <div class="pay_cont">
          <div class="pay_cont_item">
            <label>商品名称</label>
            <span>视频问诊</span>
          </div>
          <div class="pay_cont_item">
            <label>医生信息</label>
            <span>张忠俊 消化内科</span>
          </div>
          <div class="pay_cont_item">
            <label>就诊人</label>
            <span>范丽丽 女 28岁</span>
          </div>
          <div class="pay_cont_item">
            <label>订单金额</label>
            <span><i>¥</i><strong>60.00</strong></span>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import HeaderTop from "@/components/header-top";
export default {
  name: "Paysuccess",
  components: {
    HeaderTop
  },
  data() {
    return {
      time: 60 * 60 * 1000,
      TxtHeader: {
        //头部设置
        color: "#333", //头部中间文字颜色
        title: "问诊订单",
        leftOpt: {
          //左边按钮设置
          icon: "",
          text: "",
          color: "#333"
        }
      }
    };
  }
};
</script>
<style scoped>
.paysuccess >>> .van-count-down {
  display: inline-block;
}
</style>
<style lang="less">
.paysuccess {
  .head {
    background: #fff;
  }
  .pay_content {
    .pay_top {
      background: #fff;
      margin-bottom: 0.1rem;
      padding-bottom: 0.3rem;
      .top_img {
        width: 1rem;
        overflow: hidden;
        padding: 0.3rem 1.35rem;
        img {
          width: 100%;
        }
      }
      .top_cg {
        font-size: 0.15rem;
        color: #666;
        text-align: center;
        margin-bottom: 0.5rem;
        p {
          font-size: 0.15rem;
          padding-top: 0.05rem;
          strong {
            color: red;
          }
        }
      }
      .top_wz {
        width: 3.35rem;
        height: 0.44rem;
        border-radius: 0.44rem;
        background: url("../../assets/icon_foot.png") no-repeat;
        text-align: center;
        line-height: 0.44rem;
        font-size: 0.18rem;
        color: #fff;
        margin: 0 auto;
      }
    }
    .pay_info {
      border-radius: 0.07rem;
      padding: 0.2rem;
      background: #fff;
      margin-bottom: 0.1rem;
      .pay_time {
        line-height: 0.17rem;
        margin-bottom: 0.21rem;
        img {
          width: 0.125rem;
        }
      }
      .pay_title {
        padding-left: 0.15rem;
        position: relative;
        font-size: 0.18rem;
        height: 0.25rem;
        line-height: 0.25rem;
        margin-bottom: 0.2rem;
      }
      .pay_title::before {
        content: "";
        position: absolute;
        left: 0;
        top: 0.05rem;
        width: 0.05rem;
        height: 0.15rem;
        background: #08d6c6;
      }
      .pay_cont {
        .pay_cont_item {
          margin-bottom: 0.1rem;
          height: 0.2rem;
          line-height: 0.2rem;
          font-size: 0.14rem;
          label {
            color: #666;
            width: 1.14rem;
            display: inline-block;
          }
          span {
            i {
              font-size: 0.13rem;
              color: #e02020;
            }
            strong {
              font-size: 0.2rem;
              font-weight: normal;
              color: #e02020;
            }
          }
        }
        .pay_cont_sele {
          label {
            display: flex;
            justify-content: space-between;
            padding: 0.15rem 0;
            border-bottom: 1px solid #e9e9e9;
            div {
              display: flex;
              align-items: center;
              font-size: 0.14rem;
              img {
                width: 0.275rem;
                margin-right: 0.15rem;
              }
            }
          }
        }
      }
    }
  }
}
</style>
